<style lang="less" scoped>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(300px);
  opacity: 0;
}
.page-table-box {
  width: 98%;
  margin: 0 auto;
}
</style>
<template>
  <div>
    <!-- <Button @click="show = !show"></Button> -->
    <!-- <transition name="slide-fade"> -->
    <div class="page-table-box">
      <Table
        highlight-row
        ref="currentRowTable"
        @on-sort-change="sort"
        @on-current-change="choice"
        border
        :columns="columns"
        :data="list"
        no-data-text="暂无记录!!!"
        :loading="loading"
      ></Table>
      <div class="page-style" v-show="isCanto">
        <Page
          :total="totalCount"
          :current="currentPageNum"
          :page-size="pageSize"
          @on-change="changePage"
          show-total
          show-elevator
        />
      </div>
    </div>
    <!-- </transition> -->
  </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
export default {
  name: "pageTable",
  data() {
    return {
      show: false,
    };
  },
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    totalCount: {
      type: Number,
      default: 0,
    },
    currentPageNum: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 1000,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    isCanto: {
      type: Boolean,
      default: true,
    },
    name: {
      type: String,
      default: "",
    },
  },
  methods: {
    changePage(index) {
      this.$emit("change-page", index);
    },
    choice(curRow, oldCurRow) {
      this.$emit("choice-row", curRow);
    },
    sort(column) {
      this.$emit("sort-change", column);
    },
  },
  activated() {
    this.show = true;
  },
  deactivated() {
    this.show = false;
  },
};
</script>

<style scoped>
.page-table-box {
  clear: both;
  margin-bottom: 50px;
  padding: 20px 0;
}
</style>
